<!DOCTYPE html>

<html class="no-js">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title></title>
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="https://cdn.staticfile.org/axios/0.19.0-beta.1/axios.js"></script>
  <script src="../../cdn/vue/vue.global.min.js"></script>
  <link rel="stylesheet" href="../../cdn/element-plus/index.css" />
  <script src="../../cdn/element-plus/index.full.min.js"></script>

  <link rel="stylesheet" href="../../../lib/index.css" />
  <script src="../../../lib/avue.js"></script>
</head>

<body>
  <div id="app">
    <avue-form :option="option" v-model="obj" @submit="submit" @error="error">
      <template #input="scope">
        <el-tag>{{scope.row}}</el-tag>
      </template>
    </avue-form>
  </div>
</body>
<script>
  var app = Vue.createApp({
    data() {
      return {
        obj: {
          title: '二、我是大标题',
          dynamic: [{
            input: 1,
            select: 1,
            radio: 1,
            number: 11
          }, {
            input: 2,
            select: 2,
            radio: 1,
            number: 22
          }, {
            input: 2,
            select: 2,
            radio: 1,
            number: 33
          }]
        },
        option: {
          labelWidth: 110,
          column: [{
            label: '树型',
            prop: "tree",
            type: 'tree',
            dicData: [{
              label: '1-1',
              value: 0,
              children: [{
                label: "2-1",
                value: 1
              }]
            }]
          }, {
            label: '',
            prop: 'title',
            type: "title",
            labelWidth: 40,
            styles: {
              color: 'red',
            },
            span: 24
          },
          {
            label: '子表单',
            prop: 'dynamic',
            type: 'dynamic',
            span: 24,
            children: {
              rowAdd: (done) => {
                this.$message.success('新增回调')
                done({ input: 3 })
              },
              rowDel: (row, done) => {
                this.$message.success('删除回调' + JSON.stringify(row))
                done();
              },
              selection: true,
              selectionChange: (val) => {
                console.log(val)
              },
              height: 300,
              align: 'center',
              headerAlign: 'center',
              column: [{
                width: 200,
                label: '输入框',
                prop: "input"
              }, {
                width: 200,
                label: '密码框',
                prop: "password",
                type: 'password',
                rules: [
                  {
                    required: true,
                    message: '请输入密码',
                    trigger: 'blur'
                  }
                ]
              }, {
                width: 200,
                label: '树型',
                prop: "tree",
                type: 'tree',
                dicData: [{
                  label: '1-1',
                  value: 0,
                  children: [{
                    label: "2-1",
                    value: 1
                  }]
                }]
              }, {
                width: 200,
                label: '选择框',
                prop: "select",
                type: 'select',
                dicData: [{
                  label: '测试1',
                  value: 1
                }, {
                  label: '测试2',
                  value: 2
                }]
              }, {
                width: 200,
                label: '多选',
                prop: "checkbox",
                type: 'checkbox',
                dicData: [{
                  label: '测试1',
                  value: 1
                }, {
                  label: '测试2',
                  value: 2
                }]
              }, {
                width: 200,
                label: '开关',
                prop: "switch",
                type: 'switch',
                dicData: [{
                  label: '测试1',
                  value: 1
                }, {
                  label: '测试2',
                  value: 2
                }]
              }, {
                width: 200,
                label: '数字框',
                prop: "number",
                type: 'number'
              }]
            }
          }, {
            label: '子表单',
            prop: 'dynamic1',
            type: 'dynamic',
            span: 24,
            children: {
              rowAdd: (done) => {
                this.$message.success('新增回调')
                done({ input: 3 })
              },
              rowDel: (row, done) => {
                this.$message.success('删除回调' + JSON.stringify(row))
                done();
              },
              selection: true,
              selectionChange: (val) => {
                console.log(val)
              },
              height: 300,
              align: 'center',
              headerAlign: 'center',
              column: [{
                width: 200,
                label: '输入框',
                prop: "input"
              }, {
                width: 200,
                label: '密码框',
                prop: "password",
                type: 'password',
                rules: [
                  {
                    required: true,
                    message: '请输入密码',
                    trigger: 'blur'
                  }
                ]
              }, {
                width: 200,
                label: '树型',
                prop: "tree",
                type: 'tree',
                dicData: [{
                  label: '1-1',
                  value: 0,
                  children: [{
                    label: "2-1",
                    value: 1
                  }]
                }]
              }, {
                width: 200,
                label: '选择框',
                prop: "select",
                type: 'select',
                dicData: [{
                  label: '测试1',
                  value: 1
                }, {
                  label: '测试2',
                  value: 2
                }]
              }, {
                width: 200,
                label: '多选',
                prop: "checkbox",
                type: 'checkbox',
                dicData: [{
                  label: '测试1',
                  value: 1
                }, {
                  label: '测试2',
                  value: 2
                }]
              }, {
                width: 200,
                label: '开关',
                prop: "switch",
                type: 'switch',
                dicData: [{
                  label: '测试1',
                  value: 1
                }, {
                  label: '测试2',
                  value: 2
                }]
              }, {
                width: 200,
                label: '数字框',
                prop: "number",
                type: 'number'
              }]
            }
          },

          ]
        }
      }
    },
    methods: {
      error(msg) {
        console.log(msg)
      },
      submit(form, done) {
        setTimeout(() => { done() }, 2000)
      }
    }
  })
  app.use(ElementPlus)
  app.use(AVUE)
  app.mount('#app')
</script>

</html>